<template>
    <div class="home-add">
        <div class="menu-box">
            <div
                class="home-menu-list relative overflow-visible pdb20 mgb40"
                :class="{ 'after-line': collectNav.length > 0 }"
            >
                <a-input-search
                    class="menu-search"
                    :placeholder="$t('wpms.pleaseInputMenuName')"
                    style="width: 200px"
                    @search="onSearch"
                />
                <div class="pdt20" id="homeQuickNav">
                    <h3 class="text-left new-pcolor font-size18 overflow-hidden">
                        <!--请输入菜单名称-->
                        <span class="float-l menu-title">{{ $t('home.quickNav') }}</span>
                    </h3>
                    <ul
                        class="add-ul list-style-none w-p100 pdl20 mgt10"
                        v-if="collectNav.length > 0"
                    >
                        <li
                            @click="toUrl(item)"
                            :title="item.menuName"
                            class="item-menu table-font-color float-l text-left"
                            v-for="(item, index) in collectNav"
                            :key="index"
                        >
                            <span
                                class="right-top delete-collect"
                                @click.stop="dealCollect(false, item)"
                                title="取消快捷"
                            ></span>
                            <img
                                class="menu-icon-bg"
                                :src="item.showHomeIcon || (uniqueMenuCodes.includes(item.uniqueMenuCode) ? '../../..' + assetsPublicPath + 'static/img/homeIcon/' + item.uniqueMenuCode + '.png' : defaultImg)"
                                @error="showDefaultImg(item)"
                            />
                            <!--<div class="menu-icon-bg" :style="{'background-image': 'url(' + (item.showHomeIcon || '../../..' + assetsPublicPath +'static/img/homeIcon/'+ item.uniqueMenuCode + '.png') + ')'}"></div>-->
                            <span class="menu-text font-size14">{{ item.showName }}</span>
                        </li>
                    </ul>
                    <div v-else class="no-collet float-l">
                        <p class="relative">
                            <!--鼠标移动到对应菜单右上角，点击图标可以添加收藏-->
                            <span>{{ $t('wpms.collectToUpEfficiency') }}</span>
                        </p>
                    </div>
                </div>
                <div class="line-text" v-if="collectNav.length > 0">已收藏菜单({{ collectNav.length }})个</div>
            </div>
            <div
                class="home-menu-list"
                v-for="(pItem, index) in addSearchKey ? searchArr : allMenus"
                :key="index"
            >
                <h3
                    class="menu-title"
                    :id="pItem.moduleName + pItem.module"
                >{{ pItem.moduleName || $t(`app${pItem.module}`) }}</h3>
                <div class="pdl20">
                    <div class="item-menu-box">
                        <div
                            class="item-menu float-l"
                            :title="item.menuName"
                            :class="{ 'animal-menu': !item.isC && isCollect }"
                            v-for="(item, index) in pItem.menus"
                            :key="index"
                            @click="toUrl(item)"
                        >
                            <img
                                class="menu-icon-bg"
                                :src="item.showHomeIcon || (uniqueMenuCodes.includes(item.uniqueMenuCode) ? '../../..' + assetsPublicPath + 'static/img/homeIcon/' + item.uniqueMenuCode + '.png' : defaultImg)"
                                @error="showDefaultImg(item)"
                            />
                            <!--<div class="menu-icon-bg" :style="{'background-image': 'url(' + (item.showHomeIcon || '../../..' + assetsPublicPath +'static/img/homeIcon/'+ item.uniqueMenuCode + '.png') + ')'}"></div>-->
                            <span
                                class="right-top"
                                :class="item.isC ? 'collected' : 'un-collect'"
                                @click.stop="dealCollect(item.isC, item)"
                                :title="item.isC ? '取消收藏' : '收藏'"
                            ></span>
                            <p class="menu-text relative">
                                <span>{{ item.showName }}</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <!--锚点-->
            <a-anchor :getContainer="getContainer" @click="handleClick" :affix="true">
                <a-anchor-link href="#homeQuickNav" :title="$t('home.quickNav')" />
                <a-anchor-link
                    v-for="(pItem, index) in addSearchKey ? searchArr : allMenus"
                    :href="'#' + pItem.moduleName + pItem.module"
                    :key="index"
                    :title="pItem.moduleName || $t(`app${pItem.module}`)"
                />
            </a-anchor>
        </div>
    </div>
</template>
<script>
// import factory from "./factory";
import CONSTANTS from '@/constants/constants'
import defaultImg from '@/assets/images/menu_default.png'
export default {
    props: {
        collectNav: {
            type: Array,
            default() {
                return []
            }
        },
        allMenus: {
            type: Array,
            default() {
                return []
            }
        }
    },
    data() {
        return {
            addSearchKey: '',
            searchArr: [],
            assetsPublicPath: CONSTANTS.assetsPublicPath,
            isCollect: false,
            uniqueMenuCodes: CONSTANTS.UNIQUNEMENUCODES,
            defaultImg: defaultImg
        }
    },
    methods: {
        /**@augments
         * @method getContainer() 设置锚点对应的容器
         */
        getContainer() {
            return document.getElementsByClassName('home-add')[0]
        },
        /**@augments
         * @method handleClick() 取消默认行为，防止页面的路由地址变化
         */
        handleClick(e, link) {
            e.preventDefault();
        },
        /**@augments
         * @method search() 查询
         */
        onSearch(val) {
            this.searchArr = []
            let that = this
            that.addSearchKey = val
            if (!that.addSearchKey) {
                return
            }
            this.allMenus.forEach((element) => {
                let param = {}
                param.menus = []
                element.menus.forEach((item) => {
                    let name = item.customNameFlag ? this.$t(item.menuName) : this.$t(item.uniqueMenuCode)
                    if (name.includes(that.addSearchKey)) {
                        param.module = element.module
                        param.moduleName = element.moduleName
                        param.menus.push(item)
                    }
                })
                if (param.module || param.moduleName) {
                    this.searchArr.push(param)
                }
            })
            if (this.searchArr.length === 0) {
                $(".ant-anchor-link .ant-anchor-link-title")[0].click()
            }
        },
        /**@augments
         * @method toUrl() 地址跳转
         */
        toUrl(item) {
            this.$emit('toUrl', item)
            // factory.getPrivilege(item, () => {
            //     this.$emit('toUrl', item)
            // }, this)
        },
        /**@augments
         * @method collect() 开启或者关闭收藏
         */
        collect() {
            this.isCollect = !this.isCollect
        },
        /**@augments
         * @method collect() 是否收藏
         * @param {Object} item 当前的收藏项对象
         */
        dealCollect(bl, item) {
            this.$emit('collect', item)
        },
        /**@augments
         * @method showDefaultImg() 如果图片都没有，也没有维护的，就展示默认的
         * @param {Object} item 当前的收藏项对象
         */
        showDefaultImg(item) {
            item.showHomeIcon = defaultImg
        }
    },
    mounted() {
        this.addSearchKey = ''
        this.searchArr = []
    }
}
</script>
<style lang="scss">
$blackColor: #242d37;
.home-add-dropdown {
    z-index: 950 !important;
    min-width: auto !important;
}

.home-add {
    padding-left: 30px;
    padding-right: 150px;
    background: #fbfbfb;
    height: 100%;
    width: 100%;
    overflow: auto;
    position: absolute;
    .after-line::after {
        content: "";
        position: absolute;
        width: 960px;
        height: 1px;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        background: #c9c9c9;
    }
    .line-text {
        position: absolute;
        left: 0;
        right: 0;
        bottom: -9px;
        margin: auto;
        width: 120px;
        background: #fbfbfb;
        z-index: 2;
    }
    .menu-box {
        width: 1200px;
        margin: auto;
        position: relative;
        .overflow-visible {
            overflow: visible;
        }
    }
    .item-menu-box {
        overflow: inherit;
    }
    .menu-search {
        position: fixed;
        margin-left: 490px;
        margin-top: 20px;
    }
    .overflow-visible {
        overflow: visible;
    }
    .right-top {
        position: absolute;
        width: 30px;
        height: 30px;
        top: 0;
        right: 0;
        display: none;
    }
    // .delete-collect {
    //     background: url("~@/img/del-collect.png") no-repeat;
    // }
    // .collected {
    //     background: url("~@/img/collected.png") no-repeat;
    // }
    // .un-collect {
    //     background: url("~@/img/unCollect.png") no-repeat;
    // }
    .add-collect {
        float: left;
        margin-left: 18px;
        width: 35px;
        height: 35px;
        margin-top: -5px;
        cursor: pointer;
        // background: url("~@/img/edit-collect.png") no-repeat;
    }
    // .submit-collect {
    // background: url("~@/img/submit-collect.png") no-repeat;
    // }
    .add-ul {
        overflow: hidden;
        margin-bottom: 0;
    }
    .ant-anchor-wrapper {
        position: fixed;
        background: #fbfbfb;
        text-align: left;
        margin-left: 1050px;
        top: 218px;
    }
    .pdt20 {
        padding-top: 20px;
    }
    .home-menu-list {
        &.mgb40 {
            margin-bottom: 40px;
        }
        clear: both;
        width: 1000px;
        overflow: hidden;
        margin-bottom: 15px;
    }
    .menu-title {
        margin-bottom: 18px;
        text-align: left;
        font-size: 18px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 24px;
        letter-spacing: 0px;
        color: #313b46;
    }
    .no-collet {
        background-position: center center;
        background-size: auto;
        background-color: #fff;
        margin-left: 20px;
        width: 960px;
        height: 120px;
        line-height: 120px;
        border: 1px dashed #c6c6c6;
        margin-bottom: 40px;
    }
    .item-menu {
        box-sizing: border-box;
        position: relative;
        width: 120px;
        height: 120px;
        border: 1px solid #f1f1f1;
        background: #fff;
        cursor: pointer;
        font-size: 12px;
        color: #76797c;
        margin: 0 20px 20px 0;
        .menu-icon-bg {
            position: absolute;
            max-width: 74px;
            max-height: 74px;
            left: 0;
            top: 10px;
            bottom: 0;
            right: 0;
            margin: 0 auto;
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
        }
        .menu-text {
            position: absolute;
            left: 0;
            right: 0;
            text-align: center;
            bottom: 8px;
            margin: 0;
            font-size: 14px;
            color: #282d33;
        }
        &.animal-menu {
            transition: transition;
        }
        &:hover {
            border: 1px solid #3598db;
            .right-top {
                display: block;
            }
        }
    }
}

.client-black-theme {
    .home-add {
        background: $blackColor;
        .no-collet {
            background-color: #28313b;
            color: #585f66;
            border: dashed 1px #484f57;
        }
        .after-line::after {
            background: #3d444d;
        }
        .line-text {
            color: rgba(255, 255, 255, 0.2);
            background: $blackColor;
        }
        .ant-anchor-wrapper {
            background: $blackColor;
            .ant-anchor-link-title {
                color: rgba(255, 255, 255, 0.31);
                &:hover {
                    color: #40a9ff;
                }
            }
            .ant-anchor-link-active > .ant-anchor-link-title {
                color: #40a9ff;
            }
            .ant-anchor-ink:before {
                background: rgba(255, 255, 255, 0.31);
            }
        }
        .menu-title {
            color: rgba(255, 255, 255, 0.47);
        }
        .item-menu {
            &.no-collet {
                background-color: #28313b;
                border: 1px dashed #484f57;
            }
            border: 1px solid $blackColor;
            background: none;
            color: #fff;
            .menu-text {
                color: #fff;
            }
            &:hover {
                border: 1px solid #3598db;
                .right-top {
                    display: block;
                }
            }
        }
        .ant-input {
            background-color: #313b46;
            border: none;
            color: #afafaf;
            box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.16);
        }
    }
}
</style>


// WEBPACK FOOTER //
// src/page/home/homeAdd.vue